<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <hmInput ref="name" v-model="user.username" placeholder="请输入账号"
        :reg="rules.phoneReg"
        ></hmInput>
        <hmInput ref="nickname" v-model="user.nickname" placeholder="请求输入昵称" ></hmInput>
        <hmInput ref="pw" :reg="rules.passwordReg" v-model="user.password" placeholder="请输入密码"></hmInput>
      </div>
      <p class="tips">
        有账号？
        <a href="#/login" class="">去登录</a>
      </p>
      <!-- <div class="button">登录按钮</div> -->
      <van-button type="primary" round block @click="registerFn" >注册</van-button>
    </div>
  </div>
</template>

<script>
// ./表示在当前文件夹下找其他文件，../表示回到上一层目录找文件
import { register } from "../api/user.js"
import { rules } from "@/utils/validator.js"
export default {
  data(){
    return {
      user: {
        username: "13234545678",
        password: "",
        nickname: ""
      },
      rules
    }
  },
  mounted(){
    //   $router指的是整体路由对象（vue-router实例化对象）
      console.log(this.$router); // 路由跳转 就是使用该对象
    //   $route 表示当前的路由对象，比如先在访问注册页面，那么这个$route就表示注册页面的路由对象
      console.log(this.$route);  // 接收路由传递的参数 就是使用该对象
  },
  methods: {
    registerFn(){
        // console.log(this.user);
        // register()
        // 1、判断用户输入内容是否合法
        let { name, nickname, pw } = this.$refs;
        if(!name.isOk){
            this.$toast.fail("手机号码不正确！");
            return
        }
        if(!nickname.isOk){
            this.$toast.fail("昵称不能为空！");
            return
        }
        if(!pw.isOk){
            this.$toast.fail("密码3到16位！");
            return
        }
        // 2、添加加载效果
        this.$toast.loading({
            message: "加载中...",
            duration: 0
        })
        // 3、调用接口函数
        register(this.user).then(res=>{
            // console.log(60,res);
        // 4、在请求完成后 把加载效果清除
            this.$toast.clear()
        // 5、判断是否注册成功，成功则跳转到登录页面，否则弹出提示
            if(res.data.message === "注册成功"){
                this.$router.push({
                    path: "/login"
                })
            }else{
                this.$toast.fail(res.data.message)
            }
        })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>